HTMLify

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>PDI Training Interactive Quiz</title>
<style>
:root{--blue:#0033cc;--navy:#05054e;--cyan:#1edbf9;--pale:#e7f9fc;--light:#f4f5f8;--grey:#76768b;--green:#168a55;--red:#c72c41}
*{box-sizing:border-box}body{margin:0;font-family:"Titillium Web",Arial,sans-serif;color:var(--navy);background:var(--light);font-size:18px}.gradient{height:8px;background:linear-gradient(90deg,#0033cc,#0094ff,#60f5ff)}
header{background:#fff;box-shadow:0 2px 12px #05054e18;position:sticky;top:0;z-index:5}.head{max-width:980px;margin:auto;padding:15px 24px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:31px;color:var(--blue);letter-spacing:-1px}.brand b{font-weight:600}.tag{font-size:14px;color:var(--grey)}
main{max-width:980px;margin:28px auto;padding:0 20px}.card{background:#fff;border-radius:14px;padding:28px;box-shadow:0 8px 30px #05054e12;border:1px solid #d4d7e3}.intro h1{color:var(--blue);font-weight:400;font-size:42px;margin:0 0 8px}.intro p{line-height:1.5}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.fields label{font-size:15px;color:var(--grey)}input[type=text]{width:100%;padding:12px;border:1px solid #a0a5bb;border-radius:7px;font:inherit;color:var(--navy)}button{border:0;border-radius:7px;background:var(--blue);color:#fff;padding:13px 23px;font:600 18px Arial;cursor:pointer}button.secondary{background:#fff;color:var(--blue);border:2px solid var(--blue)}button:disabled{opacity:.45;cursor:not-allowed}.hidden{display:none!important}.progressbar{height:8px;background:#d4d7e3;border-radius:9px;overflow:hidden;margin:15px 0}.progressbar div{height:100%;background:linear-gradient(90deg,#0033cc,#1edbf9);width:0}.meta{display:flex;justify-content:space-between;font-size:15px;color:var(--grey)}#question{font-size:28px;font-weight:400;color:var(--blue)}.option{display:block;border:1px solid #d4d7e3;margin:11px 0;padding:14px;border-radius:8px;cursor:pointer}.option:hover{background:var(--pale);border-color:var(--cyan)}.option input{margin-right:12px}.nav{display:flex;justify-content:space-between;margin-top:24px}.result{text-align:center}.score{font-size:62px;color:var(--blue);margin:10px}.pass{color:var(--green)}.fail{color:var(--red)}.notice{padding:12px;border-left:5px solid var(--blue);background:var(--pale);margin:14px 0}.screen-only{}.print-area{display:none}.cert-page{position:relative;background:#fff;padding:14mm 16mm 16mm;width:210mm;height:297mm;overflow:hidden;color:var(--navy);page-break-after:always}.cert-page:last-child{page-break-after:auto}.print-gradient{position:absolute;left:0;right:0;bottom:0;height:6mm;background:linear-gradient(90deg,#0033cc,#0094ff,#60f5ff)}.print-brand{position:absolute;right:9mm;top:9.5mm;color:var(--blue);font-size:29pt}.cert-body{text-align:center;margin-top:42mm}.cert-body h1{font-size:30pt;color:var(--blue);font-weight:400;margin:0}.cert-body h2{font-size:20pt;font-weight:400;margin:20mm 0 4mm}.candidate{font-size:25pt;color:var(--blue);border-bottom:1px solid var(--blue);padding:0 10mm 3mm;display:inline-block;min-width:120mm}.big-result{font-size:22pt;margin:12mm}.sig{display:flex;justify-content:space-between;margin-top:30mm;text-align:left}.sig div{width:42%;border-top:1px solid var(--navy);padding-top:2mm}.summary-title{font-size:21pt;color:var(--blue);font-weight:400;margin:17mm 0 2mm}.summary-meta{font-size:10pt;margin-bottom:4mm}.summary-item{font-size:9.2pt;border-bottom:1px solid #d4d7e3;padding:2.2mm 0;break-inside:avoid}.summary-item b{color:var(--blue)}.wrong{color:var(--red)}.correct{color:var(--green)}table{width:100%;border-collapse:collapse;font-size:8.5pt}th,td{border:1px solid #76768b;padding:2mm;text-align:left}th{background:var(--blue);color:#fff}.record td{height:17mm}.page-no{position:absolute;right:16mm;bottom:10mm;font-size:9pt;color:var(--grey)}
@media(max-width:650px){.fields{grid-template-columns:1fr}.intro h1{font-size:34px}.card{padding:20px}.tag{display:none}}
@page{size:A4 portrait;margin:0}@media print{body{background:#fff}.screen-only,header,main{display:none!important}.print-area{display:block!important}.cert-page{display:block!important;box-shadow:none;margin:0}.summary-item{font-size:8.5pt;padding:1.7mm 0}}
</style></head><body><header class="screen-only"><div class="gradient"></div><div class="head"><div class="brand"><b>ormazabal</b></div><div class="tag">PDI Training Assessment</div></div></header>
<main class="screen-only"><section id="start" class="card intro"><h1>PDI Training Test</h1><p>Complete all 24 multiple-choice questions. The pass mark is <b>80% (20 out of 24)</b>. When finished, you can print an A4 certificate, a two-page answer summary and a PDI testing experience record.</p><div class="notice">For best results, use your browser's print dialog and select A4, portrait, 100% scale, with headers and footers turned off.</div><div class="fields"><div><label for="name">Candidate full name</label><input id="name" type="text" autocomplete="name" required></div><div><label for="testdate">Date of test</label><input id="testdate" type="text"></div></div><button onclick="startQuiz()">Start quiz</button></section>
<section id="quiz" class="card hidden"><div class="meta"><span id="counter"></span><span>Pass mark: 20/24</span></div><div class="progressbar"><div id="bar"></div></div><h2 id="question"></h2><div id="options"></div><div class="nav"><button class="secondary" id="prev" onclick="move(-1)">Previous</button><button id="next" onclick="move(1)">Next</button></div></section>
<section id="result" class="card result hidden"><h1>Assessment complete</h1><div class="score" id="score"></div><h2 id="status"></h2><p id="resultText"></p><div class="nav"><button class="secondary" onclick="reviewQuiz()">Review answers</button><button onclick="window.print()">Print certificate and record</button></div></section></main>
<div class="print-area" id="printArea"></div>
<script>const questions=[{"q": "What does PDI stand for?", "o": ["Pre Delivery Inspection", "Power Distribution Inspection", "Post Delivery Inspection", "Primary Distribution Inspection"], "a": 0}, {"q": "What must you use with an AC power supply test set?", "o": ["13 Amp supply", "Rubber gloves", "RCD protected supply", "Rubber floor mat"], "a": 2}, {"q": "What must you ensure when testing with a DC supply?", "o": ["Supplies are protected with an MCB or fuse rated at a minimum of 32 A", "Supplies are protected with an MCB or fuse rated at a maximum of 32 A", "Supplies are protected with an MCB or fuse rated at a minimum of 16 A", "Supplies are protected with an MCB or fuse rated at a maximum of 16 A"], "a": 1}, {"q": "What test form do we use for CPG.0-V PDI testing?", "o": ["TP104", "TP105", "TP106", "TP107"], "a": 2}, {"q": "What ANSI protection code is used for the switch disconnector?", "o": ["89S", "89T", "52", "59"], "a": 0}, {"q": "What ANSI protection code is used for the earth switch?", "o": ["89S", "89T", "52", "59"], "a": 1}, {"q": "What ANSI protection code is used for a circuit-breaker contact?", "o": ["89S", "89T", "52", "59"], "a": 2}, {"q": "What is the order of the CPG.0 multipole connectors, looking from above from left to right?", "o": ["A, B, C, D, E, F, G", "F, B, A, E, D, C, G", "G, F, E, D, C, B, A", "G, F, E, A, B, C, D"], "a": 1}, {"q": "What position does a 52a contact take when the circuit breaker is open?", "o": ["Open", "Closed", "Either", "Neither"], "a": 0}, {"q": "What position does a 52b contact take when the circuit breaker is open?", "o": ["Open", "Closed", "Either", "Neither"], "a": 1}, {"q": "What position does a 52b contact take when the circuit breaker is closed?", "o": ["Open", "Closed", "Either", "Neither"], "a": 0}, {"q": "What position does a 52a contact take when the circuit breaker is closed?", "o": ["Open", "Closed", "Either", "Neither"], "a": 1}, {"q": "Does an ENA spring-charge indication use text or a picture?", "o": ["Picture", "Text", "Both", "Neither"], "a": 1}, {"q": "Does an IEC spring-charge indication use text or a picture?", "o": ["Picture", "Text", "Both", "Neither"], "a": 0}, {"q": "What does YO1 stand for?", "o": ["Closing coil 1", "Undervoltage coil 1", "Trip coil 1", "Spring-charge motor"], "a": 2}, {"q": "When is a DO key trapped?", "o": ["Disconnector open", "Earth open", "Disconnector closed", "Earth closed"], "a": 2}, {"q": "When is a DO key free?", "o": ["Disconnector open", "Earth open", "Disconnector closed", "Earth closed"], "a": 0}, {"q": "When is an EE key free?", "o": ["When earth is applied", "When earth is applied and the circuit breaker is open", "When earth is applied and the circuit breaker is closed", "When earth is open and the circuit breaker is open"], "a": 2}, {"q": "What is the Spanish word shown for the serial number on the gas-tank label?", "o": ["Seria%", "numero%", "celida%", "quai%"], "a": 2}, {"q": "What do we use to test the mechanical operation of the fuse switch?", "o": ["Clockwork timer", "Clockwork mechanical fuse", "Current injection test set", "PF test set"], "a": 1}, {"q": "On a CGM.3-L mechanism, what terminals would you short to OPEN the mechanism?", "o": ["B1 and B2", "B2 and B3", "B3 and B4", "B5 and B6"], "a": 3}, {"q": "What test form do we use for CGM.3-P PDI testing?", "o": ["TP103", "TP105", "TP106", "TP107"], "a": 0}, {"q": "What test form do we use for CGM.3-V PDI testing?", "o": ["TP104", "TP105", "TP106", "TP107"], "a": 0}, {"q": "What test form do we use for CGM.3-L PDI testing?", "o": ["TP104", "TP105", "TP102", "TP107"], "a": 2}];let current=0,answers=Array(questions.length).fill(null),candidate='',testDate='';
function esc(s){return String(s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]))}
function startQuiz(){candidate=document.getElementById('name').value.trim();testDate=document.getElementById('testdate').value.trim();if(!candidate){alert('Please enter the candidate full name.');return}if(!testDate)testDate=new Date().toLocaleDateString('en-GB');document.getElementById('start').classList.add('hidden');document.getElementById('quiz').classList.remove('hidden');render()}
function render(){let x=questions[current];document.getElementById('counter').textContent=`Question ${current+1} of ${questions.length}`;document.getElementById('bar').style.width=`${(current+1)/questions.length*100}%`;document.getElementById('question').textContent=x.q;document.getElementById('options').innerHTML=x.o.map((o,i)=>`<label class="option"><input type="radio" name="answer" value="${i}" ${answers[current]===i?'checked':''} onchange="answers[current]=${i}"><b>${String.fromCharCode(65+i)}.</b> ${esc(o)}</label>`).join('');document.getElementById('prev').disabled=current===0;document.getElementById('next').textContent=current===questions.length-1?'Submit test':'Next'}
function move(n){if(n>0&&answers[current]===null){alert('Please select an answer before continuing.');return}if(current===questions.length-1&&n>0){finish();return}current=Math.max(0,Math.min(questions.length-1,current+n));render();window.scrollTo({top:0,behavior:'smooth'})}
function finish(){let score=questions.reduce((s,q,i)=>s+(answers[i]===q.a),0),passed=score>=20,pct=Math.round(score/questions.length*100);document.getElementById('quiz').classList.add('hidden');document.getElementById('result').classList.remove('hidden');document.getElementById('score').textContent=`${score} / ${questions.length} (${pct}%)`;let st=document.getElementById('status');st.textContent=passed?'PASS':'FAIL';st.className=passed?'pass':'fail';document.getElementById('resultText').textContent=passed?'The required pass mark has been achieved.':'The required pass mark has not been achieved.';buildPrint(score,passed,pct)}
function reviewQuiz(){document.getElementById('result').classList.add('hidden');document.getElementById('quiz').classList.remove('hidden');current=0;render()}
function shell(content,page){return `<section class="cert-page"><div class="print-brand">ormazabal</div>${content}<div class="page-no">Page ${page} of 4</div><div class="print-gradient"></div></section>`}
function buildPrint(score,passed,pct){let p1=`<div class="cert-body"><div style="font-size:11pt;letter-spacing:2px">CERTIFICATE OF ASSESSMENT</div><h1>PDI Training Test</h1><h2>This certificate confirms that</h2><div class="candidate">${esc(candidate)}</div><p>completed the PDI Training Assessment on <b>${esc(testDate)}</b>.</p><div class="big-result ${passed?'pass':'fail'}"><b>${passed?'PASS':'FAIL'}</b><br><span style="font-size:14pt;color:#05054e">Score: ${score} out of 24 (${pct}%)</span></div><p>Required pass mark: 80% (20 out of 24)</p><div class="sig"><div>Candidate signature</div><div>Authorised trainer / assessor</div></div></div>`;
let items=questions.map((q,i)=>`<div class="summary-item"><b>${i+1}. ${esc(q.q)}</b><br>Your answer: <span class="${answers[i]===q.a?'correct':'wrong'}">${esc(q.o[answers[i]])} ${answers[i]===q.a?'✓':'✗'}</span>${answers[i]!==q.a?`<br>Correct answer: <span class="correct">${esc(q.o[q.a])}</span>`:''}</div>`);let summaryHead=`<h1 class="summary-title">Answer summary</h1><div class="summary-meta"><b>Candidate:</b> ${esc(candidate)} &nbsp; <b>Date:</b> ${esc(testDate)} &nbsp; <b>Score:</b> ${score}/24 (${pct}%) &nbsp; <b>Result:</b> ${passed?'PASS':'FAIL'}</div>`;let p2=summaryHead+items.slice(0,12).join('');let p3=summaryHead+items.slice(12).join('');let rows=Array.from({length:11},()=>'<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>').join('');let p4=`<h1 class="summary-title">Record of PDI Testing Experience</h1><div class="summary-meta"><b>Candidate:</b> ${esc(candidate)}</div><table class="record"><thead><tr><th style="width:12%">Date</th><th style="width:15%">SAP Contract No.</th><th style="width:18%">Contract Name</th><th style="width:14%">Type of equipment<br>CGM / CPG.0</th><th style="width:12%">No. panels tested</th><th>Supervising Engineer and comments</th></tr></thead><tbody>${rows}</tbody></table>`;document.getElementById('printArea').innerHTML=shell(p1,1)+shell(p2,2)+shell(p3,3)+shell(p4,4)}
document.getElementById('testdate').value=new Date().toLocaleDateString('en-GB');
</script></body></html>